﻿<html>
	<head>
		<style>
			@import url(menu.css);
			body
			{
				background-color    : #f0ec40;
				background-image    : url(card-top.png);
				background-position : 24px 288px 0px 32px;
				background-repeat   : expand;
				color               : black;
				font-size           : 28px;
				margin              : 0px;
				padding             : 24px 0px 0px 0px;
			}
			h1
			{
				font-size   : 48px;
				font-weight : normal;
				margin      : 8px 20px;
			}
			input
			{
				margin : 16px 20px;
				width  : 100%%;
			}
			.row
			{
				flow  : horizontal;
				width : 100%%;
			}
			#controls
			{
				flow : horizontal;
			}
			#controls .spacer
			{
				width : 100%%;
			}
			#play
			{
				background : url(voice-play.png);
			}
			#play:active
			{
				background : url(voice-play-pressed.png);
			}
			#record
			{
				background : url(voice-record.png);
			}
			#record:active
			{
				background : url(voice-record-pressed.png);
			}
			#stop
			{
				background : url(voice-stop.png);
			}
			#stop:active
			{
				background : url(voice-stop-pressed.png);
			}
			#controls widget
			{
				background-repeat : no-repeat;
				border-style      : none;
				height            : 114px;
				margin            : 0px;
				padding           : 0px;
				width             : 116px;
			}
		</style>
	</head>
	<body>
		<h1>Voice note<br>(under construction)</h1>
		<input #title type="text" />
		<div #controls>
			<div .spacer />
			<widget type="button" #record />
			<widget type="button" #stop   />
			<widget type="button" #play   />
			<div .spacer />
		</div>
		<div .row #message></div>
	</body>
</html>
